<template>
	<z-paging ref="paging" bgColor="#F5F6FA" class="content" v-model="dataList" @query="queryList">
		<template #top>
			<view class="top-box" style="background-color: #fff;">
				<up-tabs
					:activeStyle="{
						color:'#F5493D',
						fontWeight:'Bold',
						fontSize:'30rpx'
					}"
					:inactiveStyle="{
						color:'#141311',
						fontSize:'30rpx'
					}"
					lineWidth="60rpx"
					lineHeight="6rpx"
					lineColor="#F5493D"
					:current="tab_i"
					@change="onTab"
					:list="tab"></up-tabs>
			</view>
			
		</template>
		<view class="box list-box">
			<view class="item" v-for="(item,index) in dataList">
				<view  @click="goDetails(item.order_id)">
					
				
					<view class="top">
						订单编号：{{item.order_id}}
						<view class="status">
							{{item._status._title}}
							<text  v-if="tab_i!=5&&item?.refund?.length>0">{{item.is_all_refund?`退款中`:`部分退款中`}}</text>
						</view>
						<!-- <view class="status" v-if="index==0">
							待发货
						</view>
						<view class="status off" v-if="index==1">
							已完成
						</view>
						<view class="status" v-if="index==2">
							待付款
						</view> -->
					</view>
					<my-good-item :isShowDetails="false" :list="item.cartInfo" />
				</view>
				<view class="time">
					<view class="left" >
						{{item._add_time}}
					</view>
					<view class="right">
						实付金额 
						<view class="money">
							<view class="em">￥</view>{{tab_i==5?item.pay_price:item.total_price}}
						</view>
					</view>
				</view>
				<view class="btn-box">
					<!-- <view class="left" v-if="item._status._type==3" @click="onMore(item.order_id)">更多</view> -->
					<view class="left" @click="goDetails(item.order_id)">更多</view>
					<view class="btns" v-if="tab_i!=5">
						<view class="it" v-if="item._status._type==0||item._status._type==9" @click="onOrderCancel(item.order_id)">
							取消订单
						</view>
						<view @click="goDetails(item.order_id)"  class="it" v-if="(item._status._type==1&&item.refund.length==0)||item._status._type==3">
							查看详情
						</view>
						<navigator v-if="item._status._type==0" :url="`../pay?orderId=`+item.order_id" class="it send">
							立即支付
						</navigator>
						<!-- <navigator :url="`/pages/bonus/send?id=`+item.order_id"  class="it" v-if="item._status._type==3">
							发起谜金
						</navigator> -->
						<!-- <navigator :url="`./refund?id=`+item.id"  class="it" v-if="item._status._type==1&&item.refund.length==0">
							申请退款
						</navigator> -->
						
						<!-- <view  class="it" v-if="item._status._type==1&&item.refund.length>=0" @click="onCancelRefund(item.order_id)">
							取消退款
						</view> -->
						
						<block v-if="item._status._type==2">
							<view class="it" @click="goDetails(item.order_id)">
								查看物流
							</view> 
							<view class="it ok" @click="onOrderTake(item.order_id)">
								确认收货
							</view> 
						</block>
						<view class="it send" v-if="(item._status._type==1||item._status._type==2)&&item.order_type=='other'" @click="onSend(item.order_id)">
							送别人
						</view>
					</view>
				</view>
			</view>
		</view>
		<my-send-select ref="sendRef" :id='select_id'></my-send-select>
		
	</z-paging>
</template>

<script setup>
	import {ref} from "vue"
	import {onLoad,onShow} from "@dcloudio/uni-app"
	import { getOrderList,orderCancel,orderRefundCancel,getRefundOrderList,orderTake } from "@/api/products"
	const paging=ref(null)
	const sendRef=ref(null)
	const tab_i=ref(0)
	const tab=ref([
		{
			name:'全部',
			id:9
		},
		{
			name:'待付款',
			id:0
		},
		{
			name:'待发货',
			id:1
		},
		{
			name:'待收货',
			id:2
		},
		{
			name:'已完成',
			id:3
		},
		{
			name:'售后/退款',
			id:4
		}
	])
	const dataList=ref([]) 
	const select_id=ref('');
	const onTab=(e)=>{
		tab_i.value=e.index
		paging.value.reload()
	}
	onShow(()=>{
		if(paging.value){
			paging.value.reload()
		}
	})
	onLoad((obj)=>{
		tab_i.value=obj.type
	})
	const onOrderTake= (id)=>{
		uni.showModal({
			content:'该订单确认收货',
			confirmText:'确认',
			success: async (res) => {
				if(res.confirm){
					const re= await orderTake({uni:id})
					uni.$u.toast(re.msg)
					if(re.code=='410204'){
						paging.value.refresh()
					}
					
				}
			}
		})
	}
	const queryList=async (pageNo, pageSize)=>{
		//请求接口数据
		let res=[]
		try {
			if(tab.value[tab_i.value].id==4){
				
				res=await getRefundOrderList({
					params:{
						refund_status:0,
						page:pageNo,
						limit:pageSize
					}
				})
				res=res.data.list
			}else{
				res=await getOrderList({
					params:{
						type:tab.value[tab_i.value].id,
						page:pageNo,
						limit:pageSize
					}
				})
				res=res.data
			}
			
			
		} finally{
			paging.value.complete(res);
		}
		 
		
	}
	const goDetails=(id)=>{
		uni.navigateTo({
			url:'./orderDetails?id='+id+(tab_i.value==5?'&refund=1':'')
		})
	}
	const onSend=(id)=>{
		select_id.value=id
		sendRef.value.show();
	}
	const onMore=(id)=>{
		uni.showActionSheet({
			itemList: ['发起谜金'],
			success: function (res) {
				if(res.tapIndex==0){
					uni.navigateTo({
						url:`/pages/bonus/send?id=`+id
					})
				}
			},
			fail: function (res) {
				console.log(res.errMsg);
			}
		});
	}
	const onOrderCancel= (id)=>{
		uni.showModal({
			content:'确认取消该订单',
			confirmText:'确认',
			success: async (res) => {
				if(res.confirm){
					const re= await orderCancel({id:id})
					uni.$u.toast(re.msg)
					if(re.code=='100019'){
						paging.value.refresh()
					}
					
				}
			}
		})
	}
	
	// const onCancelRefund =async (id)=>{//取消售后

	// 	await orderRefundCancel(id)
	// 	uni.hideLoading()
	// 	uni.$u.toast('取消成功！')
	// 	paging.value.refresh();

		
	// }
</script>

<style lang="scss" scoped>
	.list-box{
		
		
		.item{
			background-color: #fff;
			padding:0 24rpx;
			margin-top:20rpx;
			border-radius: 20rpx;
			.top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				color:#9A9A9A;
				font-size:26rpx;
				padding:20rpx 0 16rpx 0;
				border-bottom: 1rpx solid #EDEDED;
				.status{
					padding:0 16rpx;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: bold;
					line-height: 48rpx;
					color:#FF4A40;
					&.on{
						color:#199FFE;
					}
					&.off{
						color:#838A99;
					}
				}
			}
			.time{
				border-top: 1rpx solid #EDEDED;
				display: flex;justify-content: space-between;
				padding:28rpx 0;
				align-items: center;
				.left{
					display: flex;
					font-size: 28rpx;
					::v-deep{
						.u-count-down__text{
							color:#F5493D;line-height: 1;font-size:24rpx;font-weight: bold;
						}
					}
				}
				.right{
					display: flex;align-items: center;
					font-size:24rpx;
					line-height: 1;
					.money{
						display: flex;
						font-weight: bold;
						color:#F5493D;
						font-size: 36rpx;
						align-items: flex-end;
						margin-left:6rpx;
						.em{
							font-size:24rpx;
							padding-bottom: 2rpx;
						}
					}
				}
				.btn{
					color:#838A99;
					border-radius: 40rpx;
					background-color: #F5F6FA;
					padding:0 24rpx;line-height: 68rpx;
					font-size: 28rpx;
				}
			}
			.btn-box{
				display: flex;
				justify-content: space-between;align-items: center;
				padding-bottom: 28rpx;
				.left{
					color:#9A9A9A;font-size: 28rpx;
				}
				.btns{
					display: flex;
					gap: 12rpx;
					.it{
						color:#838A99;
						border-radius: 40rpx;
						background-color: #F5F6FA;
						padding:0 24rpx;line-height: 68rpx;
						font-size: 28rpx;
						min-width: 160rpx;
						box-sizing: border-box;
						text-align: center;
						&.send{
							background-color: #FF4A40;
							color:#fff;
						}
						&.ok{
							background-color: #FFEEED;
							color:#FF4A40;
						}
					}
					
				}
				
			}
		}
	}
	
	
</style>
